<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当日分时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(90deg, #4a7bff, #3a6be8);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .header h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .header p {
            opacity: 0.9;
            font-size: 14px;
        }
        .content {
            padding: 20px;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        button {
            padding: 10px 20px;
            background: #4a7bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        button:hover {
            background: #3a6be8;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(58, 107, 232, 0.3);
        }
        button:active {
            transform: translateY(0);
        }
        button i {
            font-size: 16px;
        }
        .chart-container {
            height: 500px;
            margin-bottom: 20px;
            border: 1px solid #eaeaea;
            border-radius: 8px;
            padding: 10px;
            background: #fdfdfd;
        }
        .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            flex: 1;
            min-width: 200px;
            text-align: center;
            border-left: 4px solid #4a7bff;
        }
        .stat-card.success {
            border-left-color: #52c41a;
        }
        .stat-card.fail {
            border-left-color: #f5222d;
        }
        .stat-card h3 {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 14px;
            color: #666;
            flex-wrap: wrap;
            gap: 10px;
        }
        .data-zoom-info {
            text-align: center;
            margin-top: 10px;
            color: #999;
            font-size: 12px;
        }
        .time-segment {
            display: inline-block;
            background: #4a7bff;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                align-items: center;
            }
            button {
                width: 100%;
                max-width: 300px;
            }
            .stats {
                flex-direction: column;
            }
            .status-bar {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>当日分时交易量统计</h1>
            <p>每10分钟分段统计成功与失败交易笔数</p>
        </div>
        <div class="content">
            <div class="controls">
                <button id="refreshBtn">
                    <i>↻</i> 刷新数据
                </button>
                <button id="simulateBtn">
                    <i>+</i> 模拟新数据
                </button>
                <button id="resetZoomBtn">
                    <i>⇄</i> 重置缩放
                </button>
                <button id="toggleAutoBtn">
                    <i>⏸</i> 暂停自动更新
                </button>
            </div>
            
            <div class="stats">
                <div class="stat-card success">
                    <h3>今日成功交易</h3>
                    <div class="value" id="totalSuccess">0</div>
                </div>
                <div class="stat-card fail">
                    <h3>今日失败交易</h3>
                    <div class="value" id="totalFail">0</div>
                </div>
                <div class="stat-card">
                    <h3>成功率</h3>
                    <div class="value" id="successRate">0%</div>
                </div>
            </div>
            
            <div id="chart" class="chart-container"></div>
            
            <div class="status-bar">
                <div>数据最后更新时间: <span id="updateTime">--:--:--</span></div>
                <div>当前分段: <span class="time-segment" id="currentSegment">--:--</span></div>
                <div>下一更新: <span id="nextUpdate">--:--</span></div>
            </div>
            
            <div class="data-zoom-info">
                使用鼠标滚轮缩放或拖动滑块查看不同时间段的数据
            </div>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 全局变量
        let transactionData = {
            segments: [],   // 10分钟分段 ['00:00', '00:10', ...]
            success: [],    // 成功笔数
            fail: []        // 失败笔数
        };
        
        let lastUpdateTime = null; // 记录最后更新时间
        let dataUpdateInterval = null; // 数据更新定时器
        let dayCheckInterval = null;  // 日期检查定时器
        let dataZoomStart = 0; // DataZoom起始位置
        let dataZoomEnd = 100; // DataZoom结束位置
        let autoScrollEnabled = true; // 是否启用自动滚动
        let autoUpdateEnabled = true; // 是否启用自动更新
        
        // 生成10分钟分段序列（从00:00到当前时间）
        function generate10MinSegments() {
            const now = new Date();
            const currentHour = now.getHours();
            const currentMinute = now.getMinutes();
            
            // 计算当前时间所属的10分钟分段
            const currentSegmentMinute = Math.floor(currentMinute / 10) * 10;
            
            const segments = [];
            
            // 生成从00:00到当前时间分段的10分钟分段
            for (let hour = 0; hour <= currentHour; hour++) {
                // 确定当前小时的最大分钟分段
                const maxSegment = (hour === currentHour) ? currentSegmentMinute : 50;
                
                for (let minute = 0; minute <= maxSegment; minute += 10) {
                    const segmentStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
                    segments.push(segmentStr);
                }
            }
            
            return segments;
        }
        
        // 根据当前时间获取对应的10分钟分段
        function getCurrentSegment() {
            const now = new Date();
            const hour = now.getHours();
            const minute = Math.floor(now.getMinutes() / 10) * 10;
            return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        }
        
        // 计算距离下一分钟的时间（用于显示下一更新时间）
        function getNextUpdateTime() {
            const now = new Date();
            const nextMinute = new Date(now);
            nextMinute.setMinutes(now.getMinutes() + 1);
            nextMinute.setSeconds(0);
            nextMinute.setMilliseconds(0);
            
            return nextMinute.toTimeString().substring(0, 5);
        }
        
        // 模拟从后台获取数据（实际应用中应替换为真实的API调用）
        function fetchTransactionData() {
            return new Promise((resolve) => {
                // 模拟API延迟
                setTimeout(() => {
                    const segments = generate10MinSegments();
                    const success = [];
                    const fail = [];
                    
                    // 生成模拟数据
                    let prevSuccess = 0;
                    let prevFail = 0;
                    
                    for (let i = 0; i < segments.length; i++) {
                        // 生成递增的模拟数据，更符合实际场景
                        const successIncrement = Math.floor(Math.random() * 50) + 10;
                        const failIncrement = Math.floor(Math.random() * 10) + 1;
                        
                        prevSuccess += successIncrement;
                        prevFail += failIncrement;
                        
                        success.push(prevSuccess);
                        fail.push(prevFail);
                    }
                    
                    resolve({ segments, success, fail });
                }, 500);
            });
        }
        
        // 获取最新数据（模拟每分钟查询）
        function fetchLatestData() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const now = new Date();
                    const currentSegment = getCurrentSegment();
                    
                    // 如果当前分段已存在，则更新数据；否则添加新分段
                    const index = transactionData.segments.indexOf(currentSegment);
                    
                    // 生成随机增量数据
                    const successIncrement = Math.floor(Math.random() * 5) + 1;
                    const failIncrement = Math.floor(Math.random() * 2);
                    
                    if (index !== -1) {
                        // 更新分段的成功和失败笔数（模拟增量数据）
                        transactionData.success[index] += successIncrement;
                        transactionData.fail[index] += failIncrement;
                    } else {
                        // 添加新分段
                        transactionData.segments.push(currentSegment);
                        
                        // 基于最后一条数据生成新数据
                        const lastSuccess = transactionData.success.length > 0 ? 
                            transactionData.success[transactionData.success.length - 1] : 0;
                        const lastFail = transactionData.fail.length > 0 ? 
                            transactionData.fail[transactionData.fail.length - 1] : 0;
                        
                        transactionData.success.push(lastSuccess + successIncrement);
                        transactionData.fail.push(lastFail + failIncrement);
                    }
                    
                    resolve({
                        segment: currentSegment,
                        success: transactionData.success[transactionData.success.length - 1],
                        fail: transactionData.fail[transactionData.fail.length - 1],
                        increment: {
                            success: successIncrement,
                            fail: failIncrement
                        }
                    });
                }, 300);
            });
        }
        
        // 计算DataZoom的起始和结束位置
        function calculateDataZoomRange() {
            const dataLength = transactionData.segments.length;
            
            if (dataLength <= 12) {
                // 如果数据量小于12个分段（2小时），显示全部数据
                return { start: 0, end: 100 };
            } else {
                // 显示最后12个数据分段（2小时的数据）
                const start = ((dataLength - 12) / dataLength) * 100;
                return { start, end: 100 };
            }
        }
        
        // 更新统计卡片
        function updateStats() {
            const totalSuccess = transactionData.success.reduce((a, b) => a + b, 0);
            const totalFail = transactionData.fail.reduce((a, b) => a + b, 0);
            const total = totalSuccess + totalFail;
            const successRate = total > 0 ? ((totalSuccess / total) * 100).toFixed(1) : 0;
            
            document.getElementById('totalSuccess').textContent = totalSuccess.toLocaleString();
            document.getElementById('totalFail').textContent = totalFail.toLocaleString();
            document.getElementById('successRate').textContent = `${successRate}%`;
        }
        
        // 更新图表
        function updateChart() {
            // 如果启用了自动滚动，计算DataZoom范围
            let zoomRange = { start: dataZoomStart, end: dataZoomEnd };
            if (autoScrollEnabled) {
                zoomRange = calculateDataZoomRange();
                dataZoomStart = zoomRange.start;
                dataZoomEnd = zoomRange.end;
            }
            
            const option = {
                title: {
                    text: '当日分时交易量统计（10分钟分段）',
                    left: 'center',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function(params) {
                        let result = `<div style="font-weight: bold; margin-bottom: 5px;">${params[0].axisValue}</div>`;
                        params.forEach(function(item) {
                            const value = item.value.toLocaleString();
                            result += `<div style="display: flex; align-items: center; margin: 3px 0;">
                                <span style="display: inline-block; width: 10px; height: 10px; background: ${item.color}; border-radius: 50%; margin-right: 5px;"></span>
                                ${item.seriesName}: <span style="font-weight: bold; margin-left: 5px;">${value} 笔</span>
                            </div>`;
                        });
                        return result;
                    },
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    textStyle: {
                        color: '#333'
                    }
                },
                legend: {
                    data: ['成功笔数', '失败笔数'],
                    top: 40,
                    right: 20,
                    itemWidth: 14,
                    itemHeight: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    top: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: zoomRange.start,
                        end: zoomRange.end,
                        zoomOnMouseWheel: true,
                        moveOnMouseWheel: true,
                        preventDefaultMouseMove: false
                    },
                    {
                        type: 'slider',
                        xAxisIndex: 0,
                        start: zoomRange.start,
                        end: zoomRange.end,
                        bottom: '3%',
                        height: 20,
                        handleSize: '100%',
                        showDetail: false,
                        brushSelect: false,
                        fillerColor: 'rgba(74, 123, 255, 0.2)',
                        borderColor: '#ddd'
                    }
                ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: transactionData.segments,
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        formatter: function(value) {
                            // 只在整点（分钟为00）显示标签
                            const minute = value.split(':')[1];
                            return minute === '00' ? value : '';
                        },
                        rotate: 45,
                        margin: 10
                    },
                    axisTick: {
                        alignWithLabel: true,
                        interval: function(index, value) {
                            // 只在整点显示刻度
                            const minute = value.split(':')[1];
                            return minute === '00';
                        },
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f0f0f0',
                            type: 'dashed'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '笔数',
                    nameTextStyle: {
                        padding: [0, 0, 0, -30]
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f0f0f0',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '成功笔数',
                        type: 'line',
                        data: transactionData.success,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            shadowBlur: 5,
                            shadowColor: 'rgba(82, 196, 26, 0.3)'
                        },
                        itemStyle: {
                            color: '#52c41a'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(82, 196, 26, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(82, 196, 26, 0.05)'
                                }]
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        emphasis: {
                            itemStyle: {
                                color: '#52c41a',
                                borderColor: '#fff',
                                borderWidth: 2,
                                shadowBlur: 10,
                                shadowColor: 'rgba(82, 196, 26, 0.5)'
                            }
                        }
                    },
                    {
                        name: '失败笔数',
                        type: 'line',
                        data: transactionData.fail,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            shadowBlur: 5,
                            shadowColor: 'rgba(245, 34, 45, 0.3)'
                        },
                        itemStyle: {
                            color: '#f5222d'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(245, 34, 45, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(245, 34, 45, 0.05)'
                                }]
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        emphasis: {
                            itemStyle: {
                                color: '#f5222d',
                                borderColor: '#fff',
                                borderWidth: 2,
                                shadowBlur: 10,
                                shadowColor: 'rgba(245, 34, 45, 0.5)'
                            }
                        }
                    }
                ]
            };
            
            myChart.setOption(option, true);
            
            // 监听dataZoom事件，当用户手动调整时禁用自动滚动
            myChart.off('dataZoom');
            myChart.on('dataZoom', function(params) {
                if (params.batch) {
                    dataZoomStart = params.batch[0].start;
                    dataZoomEnd = params.batch[0].end;
                } else {
                    dataZoomStart = params.start;
                    dataZoomEnd = params.end;
                }
                
                // 如果用户手动调整了缩放，暂时禁用自动滚动
                if (!autoScrollEnabled) return;
                
                const currentRange = calculateDataZoomRange();
                // 如果用户调整的范围与自动滚动的范围相差较大，则禁用自动滚动
                if (Math.abs(dataZoomStart - currentRange.start) > 5 || 
                    Math.abs(dataZoomEnd - currentRange.end) > 5) {
                    autoScrollEnabled = false;
                }
            });
        }
        
        // 初始化数据并渲染图表
        async function initializeChart() {
            try {
                const data = await fetchTransactionData();
                transactionData = data;
                lastUpdateTime = new Date();
                
                // 重置DataZoom到默认位置
                autoScrollEnabled = true;
                updateChart();
                updateStats();
                updateStatus();
                
                // 开始定时更新数据（每分钟一次）
                startDataUpdate();
                
                // 开始日期检查
                startDayCheck();
            } catch (error) {
                console.error('初始化数据失败:', error);
            }
        }
        
        // 开始定时更新数据（每分钟一次）
        function startDataUpdate() {
            // 清除之前的定时器
            if (dataUpdateInterval) {
                clearInterval(dataUpdateInterval);
            }
            
            // 每分钟更新一次数据
            dataUpdateInterval = setInterval(async () => {
                if (!autoUpdateEnabled) return;
                
                try {
                    await fetchLatestData();
                    lastUpdateTime = new Date();
                    updateChart();
                    updateStats();
                    updateStatus();
                } catch (error) {
                    console.error('更新数据失败:', error);
                }
            }, 60000); // 每分钟更新一次
        }
        
        // 开始日期检查
        function startDayCheck() {
            // 清除之前的定时器
            if (dayCheckInterval) {
                clearInterval(dayCheckInterval);
            }
            
            // 每分钟检查一次是否到了第二天00:00
            dayCheckInterval = setInterval(() => {
                const now = new Date();
                if (now.getHours() === 0 && now.getMinutes() < 10) { // 在00:00-00:10之间重置
                    // 到了第二天00:00，重置数据
                    resetData();
                }
            }, 60000); // 每分钟检查一次
        }
        
        // 重置数据（第二天00:00时调用）
        function resetData() {
            transactionData = {
                segments: [],
                success: [],
                fail: []
            };
            
            // 重新初始化图表
            initializeChart();
            
            // 显示重置提示
            const resetMsg = document.createElement('div');
            resetMsg.innerHTML = '已进入新的一天，数据已重置！';
            resetMsg.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: #52c41a;
                color: white;
                padding: 10px 15px;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                animation: fadeInOut 3s ease-in-out;
            `;
            document.body.appendChild(resetMsg);
            
            setTimeout(() => {
                if (document.body.contains(resetMsg)) {
                    document.body.removeChild(resetMsg);
                }
            }, 3000);
        }
        
        // 更新状态显示
        function updateStatus() {
            if (lastUpdateTime) {
                const timeStr = lastUpdateTime.toTimeString().split(' ')[0];
                document.getElementById('updateTime').textContent = timeStr;
                
                // 更新当前分段显示
                const currentSegment = getCurrentSegment();
                document.getElementById('currentSegment').textContent = currentSegment;
                
                // 更新下一更新时间
                document.getElementById('nextUpdate').textContent = getNextUpdateTime();
            }
        }
        
        // 模拟新数据（用于演示）
        async function simulateNewData() {
            try {
                await fetchLatestData();
                lastUpdateTime = new Date();
                updateChart();
                updateStats();
                updateStatus();
                
                // 显示成功提示
                const successMsg = document.createElement('div');
                successMsg.innerHTML = '已添加模拟数据！';
                successMsg.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #52c41a;
                    color: white;
                    padding: 10px 15px;
                    border-radius: 4px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 1000;
                    animation: fadeInOut 2s ease-in-out;
                `;
                document.body.appendChild(successMsg);
                
                setTimeout(() => {
                    if (document.body.contains(successMsg)) {
                        document.body.removeChild(successMsg);
                    }
                }, 2000);
            } catch (error) {
                console.error('模拟数据失败:', error);
            }
        }
        
        // 重置DataZoom到自动滚动状态
        function resetDataZoom() {
            autoScrollEnabled = true;
            updateChart();
            
            // 显示重置提示
            const resetMsg = document.createElement('div');
            resetMsg.innerHTML = '已重置缩放，将自动跟随最新数据滚动';
            resetMsg.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: #4a7bff;
                color: white;
                padding: 10px 15px;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                animation: fadeInOut 2s ease-in-out;
            `;
            document.body.appendChild(resetMsg);
            
            setTimeout(() => {
                if (document.body.contains(resetMsg)) {
                    document.body.removeChild(resetMsg);
                }
            }, 2000);
        }
        
        // 切换自动更新状态
        function toggleAutoUpdate() {
            autoUpdateEnabled = !autoUpdateEnabled;
            const btn = document.getElementById('toggleAutoBtn');
            const icon = btn.querySelector('i');
            
            if (autoUpdateEnabled) {
                btn.innerHTML = '<i>⏸</i> 暂停自动更新';
                btn.style.background = '#4a7bff';
                
                // 显示恢复提示
                const resumeMsg = document.createElement('div');
                resumeMsg.innerHTML = '已恢复自动更新';
                resumeMsg.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #52c41a;
                    color: white;
                    padding: 10px 15px;
                    border-radius: 4px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 1000;
                    animation: fadeInOut 2s ease-in-out;
                `;
                document.body.appendChild(resumeMsg);
                
                setTimeout(() => {
                    if (document.body.contains(resumeMsg)) {
                        document.body.removeChild(resumeMsg);
                    }
                }, 2000);
            } else {
                btn.innerHTML = '<i>▶</i> 恢复自动更新';
                btn.style.background = '#ff4d4f';
                
                // 显示暂停提示
                const pauseMsg = document.createElement('div');
                pauseMsg.innerHTML = '已暂停自动更新';
                pauseMsg.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #ff4d4f;
                    color: white;
                    padding: 10px 15px;
                    border-radius: 4px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 1000;
                    animation: fadeInOut 2s ease-in-out;
                `;
                document.body.appendChild(pauseMsg);
                
                setTimeout(() => {
                    if (document.body.contains(pauseMsg)) {
                        document.body.removeChild(pauseMsg);
                    }
                }, 2000);
            }
        }
        
        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInOut {
                0% { opacity: 0; transform: translateY(-20px); }
                20% { opacity: 1; transform: translateY(0); }
                80% { opacity: 1; transform: translateY(0); }
                100% { opacity: 0; transform: translateY(-20px); }
            }
        `;
        document.head.appendChild(style);
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeChart();
            
            // 绑定按钮事件
            document.getElementById('refreshBtn').addEventListener('click', initializeChart);
            document.getElementById('simulateBtn').addEventListener('click', simulateNewData);
            document.getElementById('resetZoomBtn').addEventListener('click', resetDataZoom);
            document.getElementById('toggleAutoBtn').addEventListener('click', toggleAutoUpdate);
            
            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        });
    </script>
</body>
</html>